<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>签名案例</title>
	</head>
	<body>
		<canvas id="canvas"style="border: 1px solid red;"></canvas>
		<button id="button">清除画面</button>
		<script>
			window.onload=function(){
				var canvas=document.getElementById("canvas")
				var cxt=canvas.getContext("2d")
				canvas.width=400
				canvas.height=300
				var canvasx=canvas.getBoundingClientRect().left;
				var canvasy=canvas.getBoundingClientRect().top;
				console.log(canvasx);
				console.log(canvasy);
				canvas.addEventListener("mousedown",downfun)
				canvas.addEventListener("mousemove",movefun)
				canvas.addEventListener("mouseup",upfun)
				var startx
				var starty
				var endx
				var endy
				cxt.lineWidth=3
				var offon=false
				var grad=cxt.createLinearGradient(0,0,300,0); //创建一个渐变色线性对象
           		grad.addColorStop(0,"yellow");//定义渐变色颜色
           		grad.addColorStop(0.5,'green')
           		grad.addColorStop(1,"07f1d2");
				function downfun(e){
					offon=true
					startx=e.clientX-canvasx
					starty=e.clientY-canvasy
				}
				function movefun(e){
					if(offon==true){
						cxt.beginPath()
						endx=e.clientX-canvasx
						endy=e.clientY-canvasy
						cxt.moveTo(startx,starty)
						cxt.lineTo(endx,endy)
						cxt.strokeStyle=grad
						cxt.stroke()
						
						startx=endx
						starty=endy
						console.log("1111")
					}
				}
				function upfun(){
					offon=false
					cxt.closePath()
				}
				document.getElementById("button").onclick=function(){
					cxt.clearRect(0,0,canvas.width,canvas.height)
				}
			}
		</script>
	</body>
</html>
